<template>
  <div id="energy-model">
    <px-row :gutter="20" style="flex-wrap: nowrap">
      <px-col :span="5" style="min-width: 290px">
        <px-row :gutter="20">
          <px-col :span="24">
            <px-card shadow="always" class="common_card fix_height">
              <div class="warns">
                <div class="model-title">
                  超标报警 (次)
                  <px-icon v-if="wranIsshow" class="icon" style="float: right" @click="warnClick">
                    <ArrowUp />
                  </px-icon>
                  <px-icon v-else class="icon" style="float: right" @click="warnClick">
                    <px-icon>
                      <ArrowDown />
                    </px-icon>
                  </px-icon>
                </div>
                <div v-show="wranIsshow" id="warnMain" class="warns-content">
                  <div class="moon-warn">
                    <div class="show-warn">
                      <!-- <div class="warn-title">
                    <div class="warntitle">
                      {{ moonalarmNum }}个部门超标报警
                    </div>
                  </div> -->
                      <modelProgress :percentage="moonPercentage" />
                    </div>
                    <div class="title">本月超标部门</div>
                    <div :class="['num', moonPercentage >= 100 ? 'warning' : '']">
                      {{ moonTotalNum }}
                    </div>
                  </div>
                  <div class="year-warn">
                    <div class="show-warn">
                      <!-- <div class="warn-title">
                    <div class="warntitle">
                      {{ yearalarmNum }}个部门超标报警
                    </div>
                  </div> -->
                      <modelProgress :percentage="yearPercentage" />
                      <div class="title">年度超标部门</div>
                      <div :class="['num', yearPercentage >= 100 ? 'warning' : '']">
                        {{ yearTotalNum }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </px-card>
          </px-col>
          <px-col :span="18">
            <div v-if="currentPoint" class="model_3d_left">
              <px-card shadow="always" class="electricity">
                <div class="steam-top">
                  <div class="icon" />
                  <div class="content">
                    <div class="title">电力使用</div>
                    <div class="total">{{ buildingEnergyData.electricEnergyConsume }}&nbsp;<span class="unit">MWh/月</span></div>
                  </div>
                </div>
                <div class="steam-bottom">
                  <div
                    v-for="(item, index) in buildingEnergyData?.electricEnergyConsumeRank?.slice(0, 3)"
                    :key="item.className"
                    class="common-layout"
                  >
                    <div class="icon" :class="[`icon_${index}`]" />
                    <div class="label">{{ classNames[item.className] }}</div>
                    <div class="num">{{ item.consume }}</div>
                  </div>
                </div>
              </px-card>
              <px-card shadow="always" class="water">
                <div class="steam-top">
                  <div class="icon" />
                  <div class="content">
                    <div class="title">热水使用</div>
                    <div class="total">{{ buildingEnergyData.hotWaterConsume }}&nbsp;<span class="unit">t/月</span></div>
                  </div>
                </div>
                <div class="steam-bottom">
                  <div v-for="(item, index) in buildingEnergyData?.hotWaterConsumeRank?.slice(0, 3)" :key="item.className" class="common-layout">
                    <div class="icon" :class="[`icon_${index}`]" />
                    <div class="label">{{ classNames[item.className] }}</div>
                    <div class="num">{{ item.consume }}</div>
                  </div>
                </div>
              </px-card>
              <px-card shadow="always" class="lng">
                <div class="steam-top">
                  <div class="icon" />
                  <div class="content">
                    <div class="title">LNG使用</div>
                    <div class="total">{{ buildingEnergyData.ngConsume }}&nbsp;<span class="unit">m³/月</span></div>
                  </div>
                </div>
                <div class="steam-bottom">
                  <div v-for="(item, index) in buildingEnergyData?.ngConsumeRank?.slice(0, 3)" :key="item.className" class="common-layout">
                    <div class="icon" :class="[`icon_${index}`]" />
                    <div class="label">{{ classNames[item.className] }}</div>
                    <div class="num">{{ item.consume }}</div>
                  </div>
                </div>
              </px-card>
              <px-card shadow="always" class="steam">
                <div class="steam-top">
                  <div class="icon" />
                  <div class="content">
                    <div class="title">蒸汽使用</div>
                    <div class="total">{{ buildingEnergyData.hotSteamConsume }}&nbsp;<span class="unit">m³/月</span></div>
                  </div>
                </div>
                <div class="steam-bottom">
                  <div v-for="(item, index) in buildingEnergyData?.hotSteamConsumeRank?.slice(0, 3)" :key="item.className" class="common-layout">
                    <div class="icon" :class="[`icon_${index}`]" />
                    <div class="label">{{ classNames[item.className] }}</div>
                    <div class="num">{{ item.consume }}</div>
                  </div>
                </div>
              </px-card>
            </div>
          </px-col>
        </px-row>
      </px-col>
      <px-col :span="5" style="min-width: 290px">
        <px-card shadow="always" class="common_card fix_height">
          <div class="ranks">
            <div class="model-title">
              部门用能排名 （tce）
              <px-icon v-if="rankIsshow" class="icon" style="float: right" @click="rankClick">
                <ArrowUp />
              </px-icon>
              <px-icon v-else class="icon" style="float: right" @click="rankClick">
                <px-icon>
                  <ArrowDown />
                </px-icon>
              </px-icon>
            </div>
            <div v-show="rankIsshow" class="ranks-content">
              <div id="rankMain" class="rankMain" />
            </div>
          </div>
        </px-card>
      </px-col>
      <px-col :span="7" style="min-width: 440px">
        <px-card shadow="always" class="common_card fix_height">
          <div class="tces">
            <div class="model-title">
              总体用能一览 (标准煤tce)
              <px-icon v-if="tceIsshow" class="icon" style="float: right" @click="tceClick">
                <ArrowUp />
              </px-icon>
              <px-icon v-else class="icon" style="float: right" @click="tceClick">
                <px-icon>
                  <ArrowDown />
                </px-icon>
              </px-icon>
            </div>
            <div v-show="tceIsshow" class="tces-content">
              <div id="tckMain" class="tckMain" />
            </div>
          </div>
        </px-card>
      </px-col>
      <px-col :span="7" style="min-width: 440px">
        <div class="model-detail">
          <px-card shadow="always" class="common_card">
            <div class="model-title">用能效率</div>
            <div id="costMain" class="cost-content">
              <div class="content-top">
                <div class="content-top--left">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">总用能耗</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.totalEnergy }}</span
                        >&nbsp; KJ/kg
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.totalEnergyYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.totalEnergyYoy }}%
                      </div>
                      <div v-if="(costData?.totalEnergyYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.totalEnergyYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
                <div class="content-top--middle">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">CO2排放</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.co2Emission }}</span
                        >&nbsp;kg
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.co2EmissionYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.co2EmissionYoy }}%
                      </div>
                      <div v-if="(costData?.co2EmissionYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.co2EmissionYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
                <div class="content-top--right">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">单芯片标煤</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.singleChipStandardCoal }}</span
                        >&nbsp;tce
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.singleChipStandardCoalYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.singleChipStandardCoalYoy }}%
                      </div>
                      <div v-if="(costData?.singleChipStandardCoalYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.singleChipStandardCoalYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-bottom">
                <div class="content_bottom_1">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">电能</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.electricEnergyConsume }}</span
                        >&nbsp;kWh
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.electricEnergyConsumeYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.electricEnergyConsumeYoy }}%
                      </div>
                      <div v-if="(costData?.electricEnergyConsumeYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.electricEnergyConsumeYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
                <div class="content_bottom_2">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">天然气</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.ngConsume }}</span
                        >&nbsp;m³
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.ngConsumeYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.ngConsumeYoy }}%
                      </div>
                      <div v-if="(costData?.ngConsumeYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.ngConsumeYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
                <div class="content_bottom_3">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">蒸汽</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.hotSteamConsume }}</span
                        >&nbsp;GJ
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.hotSteamConsumeYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.hotSteamConsumeYoy }}%
                      </div>
                      <div v-if="(costData?.hotSteamConsumeYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.hotSteamConsumeYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
                <div class="content_bottom_4">
                  <div class="category">
                    <div class="top_title">
                      <div class="icon" />
                      <div class="title">热水</div>
                    </div>
                    <div class="detail">
                      <div class="unit">
                        <span>{{ costData.hotWaterConsume }}</span
                        >&nbsp;t
                      </div>
                    </div>
                    <div class="compared">
                      <div class="title_tongbi">同比</div>
                      <div
                        class="num"
                        :style="{
                          color: (costData?.hotWaterConsumeYoy || '').indexOf('-') > -1 ? '#F87171' : '#34D399'
                        }"
                      >
                        {{ costData.hotWaterConsumeYoy }}%
                      </div>
                      <div v-if="(costData?.hotWaterConsumeYoy || '').indexOf('-') > -1" class="icon2" />
                      <div v-if="(costData?.hotWaterConsumeYoy || '').indexOf('-') < 0" class="icon1" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </px-card>
          <px-card shadow="always" class="common_card mt_16">
            <div class="model-title">部门用能KPI使用状况</div>
            <div class="energe_use">
              <div class="energe_top">
                <px-row :gutter="20">
                  <px-col :span="12">
                    <div class="elec_pro">
                      <modelProgress :percentage="usedData.electricEnergyConsumeLimit" />
                      <div class="energe_msg">
                        <div class="title">电力额度</div>
                        <div :class="['num', usedData.electricEnergyConsumeLimit >= 100 ? 'warning' : '']">
                          {{ usedData.electricEnergyConsume }}MWh
                        </div>
                      </div>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="elec_pro">
                      <modelProgress :percentage="usedData.ngConsumeLimit" />
                      <div class="energe_msg">
                        <div class="title">LNG额度</div>
                        <div :class="['num', usedData.ngConsumeLimit >= 100 ? 'warning' : '']">{{ usedData.ngConsume }}m³</div>
                      </div>
                    </div>
                  </px-col>
                </px-row>
              </div>
              <div>
                <px-row :gutter="20">
                  <px-col :span="12">
                    <div class="elec_pro">
                      <modelProgress :percentage="usedData.hotSteamConsumeLimit" />
                      <div class="energe_msg">
                        <div class="title">蒸汽额度</div>
                        <div :class="['num', usedData.hotSteamConsumeLimit >= 100 ? 'warning' : '']">{{ usedData.hotSteamConsume }}GJ</div>
                      </div>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="elec_pro">
                      <modelProgress :percentage="usedData.hotWaterConsumeLimit" />
                      <div class="energe_msg">
                        <div class="title">热水额度</div>
                        <div :class="['num', usedData.hotWaterConsumeLimit >= 100 ? 'warning' : '']">{{ usedData.hotWaterConsume }}t</div>
                      </div>
                    </div>
                  </px-col>
                </px-row>
              </div>
            </div>
          </px-card>
          <px-card shadow="always" class="common_card mt_16">
            <div class="model-title">本月用电结构 (MWh)</div>
            <div class="electricity-content">
              <div id="kwhMain" class="kwhMain" />
            </div>
          </px-card>
        </div>
      </px-col>
      <div class="model-3d">
        <div class="img_3d">
          <img class="img_bg" src="@/assets/images/energy/model.png" alt="" />
          <div class="img_3d_point">
            <div>
              <div class="point_1_title">PMD生产调度研发大楼</div>
              <img v-show="!showPMD" class="green_point_1" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('PMD')" />
              <img v-show="showPMD" class="blue_point_1" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_2_title">FAB生产厂房</div>
              <img v-show="!showFAB" class="green_point_2" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('FAB')" />
              <img v-show="showFAB" class="blue_point_2" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_3_title">HPM甲烷仓库</div>
              <img v-show="!showHPM" class="green_point_3" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('HPM')" />
              <img v-show="showHPM" class="blue_point_3" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_4_title">SGS特气站</div>
              <img v-show="!showSGS" class="green_point_4" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('SGS')" />
              <img v-show="showSGS" class="blue_point_4" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_5_title">CUB综合动力站</div>
              <img v-show="!showCUB" class="green_point_5" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('CUB')" />
              <img v-show="showCUB" class="blue_point_5" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
          </div>
        </div>
        <px-card v-if="currentPoint === 'FAB' && (routerStore.subject === 'ALL' || routerStore.subject === 'FAB')" class="common_card">
          <div class="model-title">生产情况</div>
          <div class="production-content">
            <table class="production-table">
              <thead>
                <tr style="height: 40px">
                  <th class="icon-title" style="width: 50px">序号</th>
                  <th style="width: 100px; text-align: left">项目</th>
                  <th style="width: 120px; text-align: left">数量</th>
                  <th style="width: 50px">单位</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in tableData"
                  :key="index"
                  :index="item.projectName"
                  :style="{
                    background: index % 2 === 0 ? '#E7EEFB' : '',
                    height: '36px'
                  }"
                >
                  <td style="text-align: center">{{ index + 1 }}</td>
                  <td style="text-align: left">{{ item.label }}</td>
                  <td style="text-align: left" class="amount">
                    {{ item.value }}
                  </td>
                  <td style="text-align: center">{{ item.unit }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </px-card>
      </div>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import * as echarts from "echarts";
import modelProgress from "./components/modelProgress.vue";
import { useEventListener } from "@vueuse/core";
import { warnSeach, tceSeach, rankSeach, costSeach, produceSeach, usedSeach, elecSeach, buildDataSearch } from "@/api/modules/energy";
import { useRouterStoreHook } from "@/store/modules/router";

onMounted(() => {
  warnResult();
  tceResult();
  rankResult();
  costResult();
  usedResult();
  elecResult();
});
interface rgn {
  requestId: string;
  consumeId: string;
  energyType: string;
  className: string;
  areaName: string;
  equipmentName: string;
  consumeCategory: string;
  startTime: string;
  endTime: string;
  timeUnitEnum: string;
}
const routerStore = useRouterStoreHook();

const currentPoint = ref("");
const showPMD = ref(false);
const showFAB = ref(false);
const showHPM = ref(false);
const showSGS = ref(false);
const showCUB = ref(false);

const classNames = {
  FAB: "FAB",
  MACHINE: "机械课",
  WATER: "水课",
  GAS: "气化课",
  ELECTRICTITY: "电课"
};

const progressColors = [
  { color: "#EF4444", percentage: 100 },
  { color: "#F26060", percentage: 1000 }
];

const changeImg = (val: string) => {
  currentPoint.value = val;
  switch (val) {
    case "PMD":
      showPMD.value = true;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = false;
      break;
    case "FAB":
      showPMD.value = false;
      showFAB.value = true;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = false;
      produceResult();
      break;
    case "HPM":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = true;
      showSGS.value = false;
      showCUB.value = false;
      break;
    case "SGS":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = true;
      showCUB.value = false;
      break;
    case "CUB":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = true;
      break;
    default:
      break;
  }
  buildDataResult();
};

// 超标报警
const moonTotalNum = ref();
const yearTotalNum = ref();
// const moonalarmNum = ref(0);
const moonPercentage = ref(0);
// const yearalarmNum = ref(0);
const yearPercentage = ref(0);
const warnResult = async () => {
  const data: any = await warnSeach({});
  // moonalarmNum.value = data.alarmNum;
  moonTotalNum.value = data.monthDepartment;
  moonPercentage.value = data.monthRate;
  // yearalarmNum.value = data.monthDepartment;
  yearPercentage.value = data.yearRate;
  yearTotalNum.value = data.yearDepartment;
};
const wranIsshow = ref(true);
const warnClick = () => {
  wranIsshow.value = !wranIsshow.value;
};
const rankIsshow = ref(true);
const rankClick = () => {
  rankIsshow.value = !rankIsshow.value;
};
const tceIsshow = ref(true);
const tceClick = () => {
  tceIsshow.value = !tceIsshow.value;
};

// 总体用能一览
const tceResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  // param.className = routerStore.subject;
  const data: any = await tceSeach(param);
  const xdata = ref([]);
  const ydata1 = ref([]);
  const ydata2 = ref([]);
  xdata.value = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
  ydata1.value = data.yearConsumeDTO;
  ydata2.value = data.lastYearConsumeDTO;
  tceEchart(xdata.value, ydata1.value, ydata2.value);
};
const tceEchart = (xdata, ydata1, ydata2) => {
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById("tckMain")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    color: ["#5B8FF9", "#34D399"],
    tooltip: {
      confine: true,
      trigger: "axis",
      axisPointer: {
        crossStyle: {
          color: "#999"
        }
      }
    },
    title: {
      // subtext: '单位：万'
    },
    xAxis: {
      type: "category",
      data: xdata,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        width: 60,
        overflow: "truncate",
        truncate: "..."
      }
    },
    grid: {
      left: "0px",
      top: "10px",
      right: "0px",
      bottom: "0px",
      containLabel: true
    },
    series: [
      {
        data: ydata1,
        type: "bar"
      },
      {
        data: ydata2,
        type: "line",
        symbol: "circle",
        symbolSize: 3,
        itemStyle: {
          normal: {
            lineStyle: {
              width: 1,
              color: "#34D399"
            },
            color: "#34D399"
          },
          emphasis: {
            color: "#34D399"
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  // window.addEventLister('resize', function () {
  //     myChart.resize()
  // })
};
// 反转数组
const reverseArray = (arr: any) => {
  var newArr = [];
  arr.forEach((item: any) => {
    newArr.unshift(item);
  });
  return newArr;
};

// 部门用能排名
const rankResult = async () => {
  const param = {};
  const data: any = await rankSeach(param);
  const seriesData = ref([]);
  const rankData = ref([]);
  rankData.value = reverseArray(data.map(item => item.className));
  seriesData.value = reverseArray(data.map(item => item.consume));
  tceehcart(rankData.value, seriesData.value);
};
const tceehcart = (rankData, seriesData) => {
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById("rankMain")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    tooltip: {
      trigger: "axis",
      confine: true
    },
    title: {
      // subtext: '单位：万'
    },
    xAxis: {
      type: "value",
      axisLabel: {
        fontSize: 10,
        color: "#010101",
        rotate: 30,
        margin: 10
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#010101"
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: rankData
    },
    color: ["#5B8FF9"],
    grid: {
      left: "0px",
      top: "10px",
      right: "20px",
      bottom: "0px",
      containLabel: true
    },
    series: [
      {
        data: seriesData,
        type: "bar",
        itemStyle: {
          barWidth: "16px"
        }
      }
    ]
  };

  option && myChart.setOption(option);
  // window.addEventLister("resize", function () {
  //   myChart.resize();
  // });
};

// 用能效率
const costData = ref<any>({});
const costResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await costSeach(param);
  costData.value = data;
};
//部门用能KPI使用状况
const usedData = ref<any>({});
const usedResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await usedSeach(param);
  usedData.value = data;
};
// 本月用电结构
const elecResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data = await elecSeach(param);
  const labelData = [
    {
      Ename: "valley",
      name: "谷时",
      value: 0
    },
    {
      Ename: "flat",
      name: "平时",
      value: 0
    },
    {
      Ename: "peak",
      name: "尖峰",
      value: 0
    },
    {
      Ename: "high",
      name: "峰时",
      value: 0
    }
  ];
  const chartData = ref([]);
  labelData.map((item: any) => {
    Object.keys(data).forEach((key: any) => {
      if (key === item.Ename) {
        item.value = data[key];
      }
    });
  });
  chartData.value = labelData;
  eleccard(chartData.value);
};
const eleccard = chartData => {
  type EChartsOption = echarts.EChartsOption;
  const chartDom = document.getElementById("kwhMain")!;
  const myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    color: ["#F6BD16", "#5B8FF9", "#34D399", "#EB7272"],
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        data: chartData
      }
    ]
  };
  option && myChart.setOption(option);
};
// 楼宇展示能源数据
// 3	1	CUB
// 17	1	FAB
// 59	1	SGS
// 45	1	HPM
// 31	1	PMB
const buildList = ref([
  {
    id: 3,
    name: "CUB"
  },
  {
    id: 17,
    name: "FAB"
  },
  {
    id: 59,
    name: "SGS"
  },
  {
    id: 45,
    name: "HPM"
  },
  {
    id: 31,
    name: "PMD"
  }
]);
const currentId = computed(() => {
  const buildData = buildList.value.filter((item: any) => item.name === currentPoint.value);
  return buildData && buildData[0] && buildData[0].id;
});
const buildingEnergyData = ref<any>({});
const buildDataResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    buildingId: currentId.value
  };
  const data = await buildDataSearch(param);
  // data.electricEnergyConsumeRank = joinName(data.electricEnergyConsumeRank);
  // data.hotSteamConsumeRank = joinName(data.hotSteamConsumeRank);
  // data.hotWaterConsumeRank = joinName(data.hotWaterConsumeRank);
  // data.ngConsumeRank = joinName(data.ngConsumeRank);

  // 非ALL清除排名数据
  if (routerStore.subject !== "ALL") {
    data.electricEnergyConsumeRank = [];
    data.hotSteamConsumeRank = [];
    data.hotWaterConsumeRank = [];
    data.ngConsumeRank = [];
  }
  buildingEnergyData.value = data;
};
const joinName = (arr: Array) => {
  const nameList = [
    {
      name: "水课",
      value: "WATER"
    },
    {
      name: "电课",
      value: "ELECTRICTITY"
    },
    {
      name: "气化课",
      value: "GAS"
    },
    {
      name: "机械课",
      value: "MACHINE"
    },
    {
      name: "FAB机台",
      value: "FAB"
    }
  ];
  arr.forEach((item: any) => {
    nameList.forEach((nameItem: any) => {
      if (item.className === nameItem.value) {
        item.className = nameItem.name;
      }
    });
  });
  return arr;
};
//生产情况
const tableData = ref([]);
const produceResult = async () => {
  const params = {
    buildingId: currentId.value
  };
  // "production": "",
  // "runningEquipment": "",
  // "stopEquipment": "",
  // "equipmentProductionRate": "",
  // "singleChipStandardCoal": ""
  const nameList = ref([
    {
      name: "production",
      label: "生产产量",
      value: "",
      unit: "片",
      id: 0
    },
    {
      name: "runningEquipment",
      label: "运行设备",
      value: "",
      unit: "台",
      id: 0
    },
    {
      name: "stopEquipment",
      label: "停止设备",
      value: "",
      unit: "台",
      id: 0
    },
    {
      name: "equipmentProductionRate",
      label: "设备投产率",
      value: "",
      unit: "%",
      id: 0
    },
    {
      name: "singleChipStandardCoal",
      label: "单芯片标煤",
      value: "",
      unit: "tce",
      id: 0
    }
  ]);
  const data: any = await produceSeach(params);
  Object.keys(data).forEach((item: any, index: number) => {
    nameList.value.forEach((nameItem: any) => {
      if (item === nameItem.name) {
        nameItem.value = data[item];
      }
    });
  });
  tableData.value = nameList.value;
};
interface User {
  date: string;
  name: string;
  amount1: string;
  amount2: string;
}
interface SpanMethodProps {
  row: User;
  column: TableColumnCtx<User>;
  rowIndex: number;
  columnIndex: number;
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

// 监听楼栋点位点击事件
useEventListener(window.document, "click", function () {
  // 获取当前点击的元素
  var target = event.target || event.srcElement;
  // 判断是否为点击的元素
  switch (target.className) {
    case "blue_point_1":
      showPMD.value = false;
      currentPoint.value = "";
      break;
    case "blue_point_2":
      showFAB.value = false;
      currentPoint.value = "";
      break;
    case "blue_point_3":
      showHPM.value = false;
      currentPoint.value = "";
      break;
    case "blue_point_4":
      showSGS.value = false;
      currentPoint.value = "";
      break;
    case "blue_point_5":
      showCUB.value = false;
      currentPoint.value = "";
      break;
    default:
      break;
  }
  // if (target.className.indexOf("point") < 0) {
  //   currentPoint.value = "";
  //   showPMD.value = false;
  //   showFAB.value = false;
  //   showHPM.value = false;
  //   showSGS.value = false;
  //   showCUB.value = false;
  // }
});
</script>
<style scoped lang="scss">
#energy-model {
  position: relative;

  .mt_16 {
    margin-top: 16px;
  }

  .model-title {
    position: relative;
    height: 32px;
    padding-left: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    color: #000;
    background-image: linear-gradient(to right, rgb(59 130 246 / 24%), rgb(59 130 246 / 0%));
    border-left: 4px solid #3b82f6;

    .icon {
      position: absolute;
      top: 8px;
      right: 0;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .close-title {
    position: absolute;
    top: 20px;
    right: 32px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .fix_height {
    max-height: 210px;
  }

  .ranks {
    .ranks-content {
      font-size: 12px;
      color: #4f4f4f;
    }

    .rankMain {
      height: 140px;
    }
  }

  .warns {
    .warns-content {
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
      font-size: 12px;
      color: #4f4f4f;
      text-align: center;

      .moon-warn,
      .year-warn {
        .warn-title {
          font-size: 12px;
          color: #f26060;
        }

        .title {
          font-size: 12px;
          font-weight: bold;
          color: #000;
        }

        .num {
          font-size: 16px;
          color: #3b82f6;
        }

        .warning {
          color: red;
        }

        .show-warn {
          .warn-title {
            .warntitle {
              display: none;
            }
          }
        }

        .show-warn:hover {
          .warn-title {
            .warntitle {
              display: block;
            }
          }
        }
      }
    }
  }

  .common_card {
    .tces {
      .tces-content {
        margin-top: 16px;
        font-size: 12px;
        color: #4f4f4f;

        .tckMain {
          height: 140px;
        }
      }
    }
  }

  .text-box1 {
    height: 0;
  }

  .text-box2 {
    height: 150px;
  }

  .model_3d_left {
    .steam,
    .electricity,
    .lng,
    .water {
      width: 228px;
      min-height: 124px;
      margin-top: 16px;
      background-color: #fff;
      border-radius: 8px;
    }

    .steam {
      .steam-top {
        display: flex;

        .icon {
          width: 40px;
          height: 40px;
          margin-right: 15px;
          background-image: url("@/assets/images/energy/steam.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .total {
          font-size: 24px;
          font-weight: bold;
          white-space: nowrap;

          .unit {
            font-size: 12px;
            font-weight: 300;
          }
        }
      }
    }

    .electricity {
      .steam-top {
        display: flex;

        .icon {
          width: 40px;
          height: 40px;
          margin-right: 15px;
          background-image: url("@/assets/images/energy/bgelectricity.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .total {
          font-size: 24px;
          font-weight: bold;

          .unit {
            font-size: 12px;
            font-weight: 300;
          }
        }
      }

      .steam-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .lng {
      .steam-top {
        display: flex;

        .icon {
          width: 40px;
          height: 40px;
          margin-right: 15px;
          background-image: url("@/assets/images/energy/bgnaturalgas.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .total {
          font-size: 24px;
          font-weight: bold;

          .unit {
            font-size: 12px;
            font-weight: 300;
          }
        }
      }

      .steam-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .water {
      .steam-top {
        display: flex;

        .icon {
          width: 40px;
          height: 40px;
          margin-right: 15px;
          background-image: url("@/assets/images/energy/bghotwater.png");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .total {
          font-size: 24px;
          font-weight: bold;

          .unit {
            font-size: 12px;
            font-weight: 300;
          }
        }
      }

      .steam-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .steam-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .model-3d {
    .img_3d {
      position: absolute;
      top: 270px;
      left: 200px;
      width: 900px;
      // background-image: url("@/assets/images/energy/model.png");
      // background-repeat: no-repeat;
      // background-size: cover;
      .img_bg {
        width: 100%;
      }

      .img_3d_point {
        .point_1_title {
          position: absolute;
          top: 50px;
          left: 330px;
          font-size: 16px;
          font-weight: 400;
        }

        .green_point_1 {
          position: absolute;
          top: 94px;
          left: 390px;
          width: 40px;
          cursor: pointer;
        }

        .blue_point_1 {
          position: absolute;
          top: 67px;
          left: 390px;
          width: 67px;
          cursor: pointer;
        }

        .point_2_title {
          position: absolute;
          top: -44px;
          left: 426px;
          font-size: 16px;
          font-weight: 400;
        }

        .green_point_2 {
          position: absolute;
          top: 5px;
          left: 450px;
          width: 40px;
          cursor: pointer;
        }

        .blue_point_2 {
          position: absolute;
          top: -22px;
          left: 450px;
          width: 67px;
          cursor: pointer;
        }

        .point_3_title {
          position: absolute;
          top: -44px;
          left: 546px;
          font-size: 16px;
          font-weight: 400;
        }

        .green_point_3 {
          position: absolute;
          top: 5px;
          left: 560px;
          width: 40px;
          cursor: pointer;
        }

        .blue_point_3 {
          position: absolute;
          top: -22px;
          left: 560px;
          width: 67px;
          cursor: pointer;
        }

        .point_4_title {
          position: absolute;
          top: 6px;
          left: 638px;
          font-size: 16px;
          font-weight: 400;
        }

        .green_point_4 {
          position: absolute;
          top: 54px;
          left: 638px;
          width: 40px;
          cursor: pointer;
        }

        .blue_point_4 {
          position: absolute;
          top: 27px;
          left: 638px;
          width: 67px;
          cursor: pointer;
        }

        .point_5_title {
          position: absolute;
          top: 76px;
          left: 550px;
          font-size: 16px;
          font-weight: 400;
        }

        .green_point_5 {
          position: absolute;
          top: 120px;
          left: 580px;
          width: 40px;
          cursor: pointer;
        }

        .blue_point_5 {
          position: absolute;
          top: 93px;
          left: 580px;
          width: 67px;
          cursor: pointer;
        }
      }
    }

    .common_card {
      position: absolute;
      top: 450px;
      left: 630px;
    }
  }

  .model-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    .icon1 {
      width: 16px;
      height: 16px;
      background-image: url("@/assets/images/energy/uparrow.png");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .icon2 {
      width: 16px;
      height: 16px;
      background-image: url("@/assets/images/energy/nextarrow.png");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .title_tongbi {
      font-size: 14px;
    }

    .unit {
      font-size: 14px;
    }

    .cost-content {
      font-size: 12px;
      color: #4f4f4f;

      .content-top {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        border-bottom: 1px solid #e2e4ee;

        .title {
          font-size: 16px;
          font-weight: 600;
        }

        .content-top--left,
        .content-top--middle,
        .content-top--right {
          .top_title {
            display: flex;
            align-items: center;
          }

          .category {
            margin-bottom: 24px;

            .ng-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .water-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/hotwater.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .steam-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .detail {
              .title {
                margin-bottom: 12px;
              }

              .unit {
                span {
                  font-size: 16px;
                  color: #3b82f6;
                }
              }
            }
          }

          .compared {
            display: flex;

            .num {
              padding-left: 10px;
              color: #34d399;
            }

            .numtype {
              padding-left: 8px;
            }

            .icon {
              width: 16px;
              height: 16px;
              background-image: url("@/assets/images/energy/uparrow.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--left {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/energy.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--middle {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/coal.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--right {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/chip.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;

        .content_bottom_1,
        .content_bottom_2,
        .content_bottom_3,
        .content_bottom_4 {
          .top_title {
            display: flex;
          }

          .category {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .ng-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .water-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/hotwater.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .steam-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .detail {
              .title {
                margin-bottom: 12px;
              }

              .unit {
                span {
                  font-size: 16px;
                  color: #3b82f6;
                }
              }
            }

            .compared {
              display: flex;
              justify-content: space-between;

              .num {
                padding-left: 10px;
                color: #34d399;
              }

              .numtype {
                padding-left: 8px;
              }

              .icon {
                width: 16px;
                height: 16px;
                background-image: url("@/assets/images/energy/uparrow.png");
                background-repeat: no-repeat;
                background-size: cover;
              }
            }
          }
        }

        .content_bottom_1 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/electricity.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_2 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_3 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_4 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/water.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }

    .energe_use {
      margin-top: 16px;

      .energe_top {
        margin-bottom: 16px;
      }

      .elec_pro {
        display: flex;

        .energe_msg {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16px;

          .num {
            color: #3b82f6;
          }

          .warning {
            color: red;
          }
        }
      }

      .steam {
        .steam-top1,
        .steam-top2 {
          padding-left: 20px;
          border-left: 1px solid #e2e4ee;
        }

        .steam-top0,
        .steam-top1,
        .steam-top2 {
          display: flex;

          .ng-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/naturalgas.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .water-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/hotwater.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .steam-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/steam.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .steam-cont {
            margin-left: 8px;

            .title {
              font-size: 12px;
              color: #4f4f4f;
            }

            .total {
              font-size: 20px;
              color: #3b82f6;

              span {
                font-size: 12px;
                color: #4f4f4f;
              }
            }
          }
        }

        .steam-bottom1,
        .steam-bottom2 {
          margin-left: 20px;
        }

        .steam-bottom0,
        .steam-bottom1,
        .steam-bottom2 {
          margin-top: 21px;

          .title {
            font-size: 12px;
            color: #4f4f4f;

            .up-span {
              color: #34d399;
            }

            .down-span {
              color: #34d399;
            }
          }
        }
      }
    }

    .production-content {
      height: 160px;
      overflow: scroll;

      .production-table {
        min-width: 290px;
        table-layout: fixed;
        border-collapse: collapse;

        thead {
          height: 40px;
          font-size: 14px;
          line-height: 40px;

          .icon-title {
            width: 20px;
          }

          .water {
            width: 70px;
          }
        }

        tbody {
          height: 30px;
          font-size: 12px;
          line-height: 30px;
          text-align: center;

          .amount {
            color: #3b82f6;
          }
        }
      }
    }

    .electricity-content {
      padding-top: 10px;

      .kwhMain {
        height: 140px;
      }
    }
  }
}

.px-card {
  .steam-top {
    align-items: center;

    .content {
      & > div {
        line-height: 1;
        color: #333;
      }
    }
  }

  .steam-bottom {
    margin-top: 4px;

    .common-layout {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      justify-content: center;

      & > div {
        line-height: 1;
      }

      .icon {
        width: 16px;
        height: 16px;
        margin-left: 2px;
        background-image: url("@/assets/images/energy/onecrown.png");
        background-repeat: no-repeat;
        background-size: cover;
      }

      .icon_1 {
        background-image: url("@/assets/images/energy/twocrown.png");
      }

      .icon_2 {
        background-image: url("@/assets/images/energy/threecrown.png");
      }

      .label {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>
